<template>
  <div class="login-container">
    <!-- 登录标题 -->
    <div class="login-title">
      <span class="login-title-text">质量检验信息服务平台</span>
    </div>

    <!-- 登录表单 -->
    <div class="login-from-container">
      <div class="login-from-title">用户登录</div>
      <div class="login-from-content">
        <LoginForm
          class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)"
          @update-password="updatePassword"
        />
      </div>
    </div>

    <el-dialog v-model="loginDialog" title="修改密码">
      <el-form
        ref="formLogin"
        :model="loginData.loginForm"
        class="login-form"
        label-position="top"
        label-width="120px"
        size="large"
      >
        <div class="dialog-style">
          <el-row>
            <el-col :span="24">
              <el-form-item prop="username">
                <el-input
                  v-model="loginData.loginForm.loginName"
                  :placeholder="t('login.usernamePlaceholder')"
                  class="!w100"
                >
                  <template #prefix>
                    <div class="input-icon-container">
                      <el-icon class="icon">
                        <component :is="iconAvatar" />
                      </el-icon>
                      <span class="text-black">账号</span>
                      <div class="divider"></div>
                    </div>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item prop="password">
                <el-input
                  v-model="loginData.loginForm.password"
                  :placeholder="t('login.passwordPlaceholder')"
                  show-password
                  type="password"
                  class="!w100"
                >
                  <template #prefix>
                    <div class="input-icon-container">
                      <el-icon class="icon">
                        <component :is="iconLock" />
                      </el-icon>
                      <span class="text-black">密码</span>
                      <div class="divider"></div>
                    </div>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item>
                <el-button type="primary" class="!w100" @click="updateLogin">修改</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { underlineToHump } from '@/utils'
import { useIcon } from '@/hooks/web/useIcon'
import { useDesign } from '@/hooks/web/useDesign'
import { useAppStore } from '@/store/modules/app'
import { ThemeSwitch } from '@/layout/components/ThemeSwitch'
import { LocaleDropdown } from '@/layout/components/LocaleDropdown'

import {
  LoginForm,
  MobileForm,
  QrCodeForm,
  RegisterForm,
  SSOLoginVue,
  ForgetPasswordForm
} from './index'
import { UserInfoApi } from '@/api/qis/userInfo'
const iconAvatar = useIcon({ icon: 'ep:avatar' })
const iconLock = useIcon({ icon: 'ep:lock' })
defineOptions({ name: 'Login' })
const loginDialog = ref(false)
const { t } = useI18n()
const appStore = useAppStore()
const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('login')

const loginData = reactive({
  loginForm: {
    loginName: '',
    password: ''
  }
})

const updatePassword = (value) => {
  loginDialog.value = value
}

const message = useMessage()

// 修改
const updateLogin = async () => {
  const res = await UserInfoApi.updatePasswordApi(loginData.loginForm)
  console.log(res)

  if (res.code == 0) {
    loginData.loginForm.password = ''
    loginData.loginForm.loginName = ''

    message.success('修改成功')
  }
  loginDialog.value = false
}
</script>

<style lang="scss" scoped>
$prefix-cls: #{$namespace}-login;

.#{$prefix-cls} {
  overflow: auto;

  &__left {
    &::before {
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      width: 100%;
      height: 100%;
      background-image: url('@/assets/imgs/login/bg.png');
      background-position: center;
      background-repeat: no-repeat;
      background-size: 80% 80%;
      content: '';
    }
  }
}
</style>

<style lang="scss">
.dark .login-form {
  .el-divider__text {
    background-color: var(--login-bg-color);
  }

  .el-card {
    background-color: var(--login-bg-color);
  }
}
</style>

<style lang="scss" scoped>
.login-container {
  width: 100%;
  height: 100%;
  padding: 30px;
  background: linear-gradient(90deg, #fafcff 0%, #fff 100%);
  background-image: url('@/assets/imgs/login/bg.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;

  // &::before {
  //   position: absolute;
  //   top: 26%;
  //   left: 5%;
  //   width: 100%;
  //   height: 100vh;
  //   background: url('@/assets/imgs/login/bg@1x.png') no-repeat;
  //   background-size: 52% 60%;
  //   content: '';

  //   // 移动端样式
  //   @media screen and (width <= 768px) {
  //     top: 10%;
  //     left: 0;
  //     background-size: 100% 30%;
  //   }
  // }

  .login-title {
    width: 100%;

    .login-title-text {
      position: absolute;
      top: 109px;
      left: 108px;
      display: flex;
      font-family: 'HarmonyOS Sans SC';
      font-size: 48px;
      font-weight: 600;
      line-height: 33.6px;
      letter-spacing: 0.06em;
      opacity: 1;
      align-items: center;

      // display: block;
      // margin-top: calc(109px - 30px);
      // margin-left: calc(180px - 30px);
      // font-family: 'HarmonyOS Sans SC';
      // font-size: 30px;
      // font-weight: 600;
      // letter-spacing: 5px;
      // color: #000;

      @media screen and (width <= 768px) {
        margin-left: 0;
        font-size: 20px;
        letter-spacing: 3px;
        text-align: center;
      }
    }
  }

  .login-from-container {
    position: absolute;
    top: 282px;
    right: 184px;
    display: flex;
    width: 643px;
    height: 406px;
    align-content: center;
    background-image: url('@/assets/imgs/login/loginbg.svg'); // 表单背景图
    background-repeat: no-repeat;
    background-size: 100% 100%;
    opacity: 1;

    // 移动端样式
    @media screen and (width <= 768px) {
      position: relative;
      top: 45%; // 调整位置到背景图下方
      left: 50%;
      width: 90%; // 宽度占屏幕90%
      height: auto;
      min-height: 400px;
      padding: 30px;
      transform: translateX(-50%);
    }

    .login-from-title {
      position: absolute;
      top: 4%;
      left: 50%;
      z-index: 2;
      margin-bottom: 5px;
      font-family: '思源黑体';
      font-size: 26px;
      font-weight: 500;
      color: #4589ff;
      text-align: center;
      transform: translateX(-50%);

      @media screen and (width <= 768px) {
        font-size: 20px;
      }
    }

    .login-from-content {
      // margin-top: 100px;
      display: flex;
      place-content: center center;

      @media screen and (width <= 768px) {
        margin-top: 80px;
      }
    }
  }
}

.dialog-style {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
</style>
